
import axios from "axios";
import qs from "qs"
import { ElLoading } from 'element-plus'
let loading;


// 功能1 根据环境设置axios发起不同的服务器请求地址, 设置后,发起ajax请求不再拼接基础路径
if (process.env.NODE_ENV == "development") {
    axios.defaults.baseURL = "/myBackSystem"  // 开发环境的代理路径
} else if (process.env.NODE_ENV == "production") {
    axios.defaults.baseURL = "http://localhost:8888/api/private/v1/"  // 生产环境的原始路径 (项目打包时用这个路径)
}
//功能2 添加超时功能 设置超时时间, 请求超过10秒无响应就判定请求失败
axios.defaults.timeout = 10000//10s

// 功能3 是否允许跨域请求携带Cookie, 前端设置了该属性为true时，后端需要设置Access-Control-Allow-Origin为前端项目的源地址，不可设置为*；
axios.defaults.withCredentials = false

// 功能4 在请求头设置(post)请求内容的编码格式
axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded"

// 功能5 把请求的参数由对象结构转化为查询字符串结构,  转换通过qs第三方进行转换  data就是请求参数
axios.defaults.transformRequest = data => qs.stringify(data)

// 功能6 axios请求拦截 在发请求之前 对请求进行处理 一般把本地token添加到请求头里面执行登录认证, 这样在发请求时就不用考虑并处理token了
axios.interceptors.request.use(request => {
    // 请求时开始加载, target参数指定加载框显示的区域
    loading = ElLoading.service({ target: "#refresh_box" })
    // console.log(request); // config参数是请求的配置信息
    let token = window.sessionStorage.getItem("token") //从本地取出token
    // 登录授权 请求验证是否有token  需要授权的 API ，必须在请求头中使用 `Authorization` 字段提供 `token` 令牌(具体字段由服务器后台定义)
    token && (request.headers.Authorization = token)
    // if(token){request.headers.Authorization=token}
    return request
}, error => {
    return Promise.reject(error) // 返回错误
})

// 功能7 axios的响应拦截, 可在这里对响应数据或响应头做处理
axios.interceptors.response.use(response => {
    setTimeout(() => {
        loading.close()  // 响应时结束加载
    }, 300);
    return response.data
    // axios响应数据会封装到一层data字段中, 把data字段剥开,返回原始响应
}, error => {
    return Promise.reject(error)
})

// 功能8 显示请求时的加载框, 见请求拦截和响应拦截

// 最后,返回配置之后的axios
export default axios




